<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>hello_react</title>
    </head>
    <body>
        <div id="test1"></div>

        <!-- 引入 react 核心库 -->
        <script src="./js/react.development.js" type="text/javascript"></script>
        <!-- React 对象 -->
        <script src="./js/react-dom.development.js" type="text/javascript"></script>
        <!-- ReactDOM 对象 -->
        <script src="./js/babel.min.js" type="text/javascript"></script>
        <!-- babel -->
        <script src="./js/prop-types.js" type="text/javascript"></script>
        <!-- PropTypes -->

        <script type="text/babel">
            class Count extends React.Component {
                constructor(props) {
                    super(props)
                    console.log('constructor')
                    // 初始化状态
                    this.state = {
                        count: 1
                    }
                }
                // 必须加 static
                // 返回状态对象,如果 state 的值在任何时候都取决于props 时使用，入参可以接收props和state
                static getDerivedStateFromProps(props, state) {
                    console.log('getDerivedStateFromProps')
                    return null
                }
                // 在最近一次渲染输出前调用，其两个参数分别为渲染前的 props和state
                // 作用：使组件能在发生更改之前捕获一些信息（例如：滚轮、移动位置）
                // 此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
                getSnapshotBeforeUpdate(prevProps, prevState) {
                    console.log(prevProps, prevState)
                    console.log('getSnapshotBeforeUpdate')
                    return 'liuguowei'
                }
                // 组件更新完毕的钩子
                // prevProps 和 prevState 也是渲染前的 props和state
                // snapshotValue 为 getSnapshotBeforeUpdate 传递的快照值
                componentDidUpdate(prevProps, prevState, snapshotValue) {
                    console.log(prevProps, prevState, snapshotValue)
                    console.log('componentDidUpdate')
                }
                // 组件挂载完毕的钩子
                componentDidMount() {
                    console.log('componentDidMount')
                }
                add = () => {
                    const { count } = this.state
                    this.setState({
                        count: count + 1
                    })
                }
                death = () => {
                    ReactDOM.unmountComponentAtNode(document.querySelector('#test1'))
                }
                // 组件卸载的钩子
                componentWillUnmount() {
                    console.log('componentWillUnmount')
                }
                /* 
                控制组件更新的阀门钩子
                点击 +1
                默认已有，返回 true，如果重写必须有返回值，且返回值为boolean
                如果返回false，则不更新
            */
                shouldComponentUpdate() {
                    console.log('shouldComponentUpdate')
                    return true
                }
                render() {
                    console.log('render')
                    return (
                        <div>
                            <h2>当前求和为{this.state.count}</h2>
                            <button onClick={this.add}>+1</button>
                            <button onClick={this.death}>关闭</button>
                        </div>
                    )
                }
            }
            ReactDOM.render(<Count count={108} />, document.querySelector('#test1'))
        </script>
    </body>
</html>
